<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>layout</title>
  <link rel="stylesheet" href="./layout.css">
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
    .box > div {
      position: absolute;
      background: red;
    }

    .box > div.top, .box > div.bottom {
      cursor: row-resize;
      height: 4px;
      width: 100%;
    }

    .box > div.left, .box > div.right {
      cursor: col-resize;
      width: 4px;
      height: 100%;
    }

    .box > .left {
      left: -2px;
    }

    .box > .right {
      right: -2px;
    }

    .box > .top {
      top: -2px;
    }

    .box > .bottom {
      bottom: -2px;
    }

  </style>
</head>
<body>
<div class="layout-root">
  <div class="box" style="position: relative; left: 100px;top: 100px; background: #333;">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</div>

<script>
  let width;
  let move = null;
  let start = {};
  let end = {};
  let box = {};

  const $root = document.querySelector('.layout-root');
  const $box = document.querySelector('.box');

  function setBoxData() {
    const { offsetLeft: left, offsetTop: top, offsetHeight, offsetWidth, clientHeight, clientWidth } = $box;
    const width = clientWidth || offsetWidth;
    const height = clientHeight || offsetHeight;
    const right = left + width;
    const bottom = top + height;

    box = { left, top, width, height, right, bottom };
  }

  setBoxData();

  console.log('$box', box);

  const __mousemove = function mousemove(event) {
    const { x, y, pageX, pageY, layerX, layerY, buttons } = event;

    // 确保是鼠标左键被按下拖动
    if (buttons === 1) {
      end = { x, y, pageX, pageY, layerX, layerY };

      switch (move) {
        case 'left': {
          $box.style.width = (box.width - (x - box.left)) + 'px';
          $box.style.left = x + 'px';
          break;
        }

        case 'right': {
          $box.style.width = (box.width + (x - box.right)) + 'px';
          break;
        }

        case 'top': {
          $box.style.height = (box.height - (y - box.top)) + 'px';
          $box.style.top = y + 'px';
          break;
        }

        case 'bottom': {
          $box.style.height = (box.height + (y - box.bottom)) + 'px';
          break;
        }
      }
    }
  };

  document.addEventListener('mousemove', __mousemove, false);

  function onMouseStart (event) {
    const { x, y, pageX, pageY, layerX, layerY } = event;

    console.log(x, y, box);

    if (x >= box.left - 2 && x <= box.left + 2) {
      move = 'left';
      $root.style.cursor = 'col-resize';
    } else if (x >= box.right - 2 && x <= box.right + 2) {
      move = 'right';
      $root.style.cursor = 'col-resize';
    } else if (y >= box.top - 2 && y <= box.top + 2) {
      move = 'top';
      $root.style.cursor = 'row-resize';
    } else if (y >= box.bottom - 2 && y <= box.bottom + 2) {
      move = 'bottom';
      $root.style.cursor = 'row-resize';
    }

    start = { x, y, pageX, pageY, layerX, layerY };
    // 阻止默认事件
    event.preventDefault();
  }

  function onMouseEnd () {
    console.log('end');
    move = null;
    $root.style.cursor = 'default';

    setBoxData();
  }

  document.addEventListener('mousedown', onMouseStart, false);

  document.addEventListener('mouseup', onMouseEnd, false);
  document.addEventListener('mouseup', onMouseEnd, false);

  window.addEventListener('load', function () {
    const { innerHeight, innerWidth } = window;

    width = innerWidth;

  }, false)
</script>
</body>
</html>
